<template>
  <div class="coures">
    <el-dialog
        v-model="contactDialog"
        :align-center="true"
        :show-close="false"
        width="535"
    >
      <template #header="{ close, titleId, titleClass }">
        <div>
          <div class="course-dio-top tw-px-22 tw-pl-52 flex-between-center tw-relative">
            <div class="flex-column">
              <span class="font-xxx color-white">{{ text }}</span>
            </div>
            <img alt="" class="tw=w-172 tw-h-172" src="@/assets/images/course/final-step.png"/>
          </div>
          <el-icon class="tw-absolute tw-top-16 tw-right-16 click" color="#fff" size="22"
                   @click="contactDialog = !contactDialog">
            <CircleCloseFilled/>
          </el-icon>
        </div>
      </template>
      <p class="text-center font-normal tw-my-24">还有更多资料等你来拿</p>
      <div class="tw-w-535 tw-bg-[#EBEBEB] tw-h-2 -tw-ml-16 tw-mt-16"></div>
      <p class="text-center tw-mt-10">每月持续更新，备考路上好助手</p>
      <p class="text-center tw-mt-10">打开微信扫码添加老师</p>
      <p class="flex-all-center">
        <img :src="store.state.customerImg"class="tw-w-224 tw-h-244" alt="">
      </p>
      <p class="text-center tw-mt-10 flex-all-center tw-text-[#0BB71F]">
        <el-icon class="tw-mr-2" color="#0BB71F" size="16">
          <SuccessFilled/>
        </el-icon>
        已通过安全认证 可放心添加
      </p>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {CircleCloseFilled, SuccessFilled} from "@element-plus/icons-vue";
import {useStore} from 'vuex';

const store = useStore();
let contactDialog=ref(false)
let text=ref(' 添加客服购买')
const openDialog = (content) => {
  text.value=content=='lijigoumai'?'添加客服购买':'添加客服咨询'
  contactDialog.value=true
}
defineExpose({ openDialog })
</script>

<style lang="scss" scoped>
.course-dio-top {
  width: 535px;
  height: 126px;
  background: linear-gradient(90deg, #fe815d 0%, #ff9e82 100%);
  border-radius: 0px 0px 0px 0px;
  margin: -16px;
}

.coures {
  .el-dialog__body {
    padding: 0;
  }

  .el-dialog .is-align-center {
    padding: 0;
  }
}

</style>
